<template>
  <div class="main_contain" v-loading="loading">
    <div class="nav-link">
      <template v-for="(item, index) in tabs">
        <el-button
          @click="handleToggle(index)"
          size="medium"
          :class="{ 'ntp-btn': true, active: currentIndex == index }"
        >{{ item.label }}</el-button>
      </template>
    </div>
    <el-main class="container" ref="table" :style="{ height: st + 'px' }">
      <template v-for="(item, index) in lists">
        <div class="row">
          <div class="row-main">
            <div class="row1">
              <span class="txt">{{ item.name }}</span>
              <span class="txt">{{ item.created_by }}</span>
              {{ item.excelname }}
            </div>
            <div class="row">
              <div class="f1 txt2">任务提交时间：{{ item.created_at }}</div>
              <div class="f1 txt2">数据生成时间：{{ item.finished_at }}</div>
            </div>
          </div>
          <div class="row-aside">
            <el-button
              size="mini"
              class="btn"
              :disabled="item.status !== 2"
              @click="downfile(item.qiniu_url)"
            >下载</el-button>
          </div>
        </div>
      </template>
    </el-main>

    <pagination
      ref="paginationTotal"
      :page="currentPage"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // // 权限编码
    // column: {
    //   type: String,
    //   required: true,
    // },
    // noShowUser: {
    //   type: Boolean,
    // },
  },
  data() {
    return {
      loading: false,

      currentIndex: 0,
      tabs: [
        { value: '', label: '全部' },
        { value: 1, label: '数据生成中' },
        { value: 2, label: '数据可下载' },
      ],
      status: '',
      st: 300,
      lists: [],

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30],
      // 默认每页显示的条数（可修改）
      pageSize: 30,
    }
  },
  watch: {
    column(val, oldval) {
      console.log(val)
      this.column = val
    },
  },
  mounted: function () {
    let that = this
    // this.column = this.$route.query.column;
    // this.init();
    that.$util.autoHeight(that, that.$refs.table.$el)
    that.handleRequest()
  },
  computed: {},
  methods: {
    resetting() {},

    handleToggle(e) {
      console.log(e)
      let that = this
      if (e != that.currentIndex) {
        that.currentIndex = e
        that.currentLabel = that.tabs[e]['label']
        that.currentTab = that.tabs[e]['name']
        that.license = that.licenses
        that.agreement = that.agreements
        that.status = that.tabs[e]['value']
        that.currentPage = 1
        that.handleRequest()
      }
    },

    sizeChange(e) {
      const that = this
      that.currentPage = 1
      that.pageSize = e
      that.handleRequest()
    },

    currentChange(e) {
      this.currentPage = e
      this.handleRequest()
    },

    async handleRequest() {
      let that = this
      that.loading = true
      let { status, pageSize } = that
      let { result } = await that.$.util.downloadCenter({
        status: that.status,
        page: that.currentPage,
        page_size: pageSize,
      })
      console.log(result)
      that.loading = false
      // this.$nextTick(() => {});
      that.lists = result.list
      // console.log(that.lists);
      that.total = result.pagination.total_count
      // console.log(result.list);
    },
  },
}
</script>

<style scoped>
.main_contain {
  padding: 12px 20px;
}

.container > .row {
  padding: 12px 0;
  border-bottom: 1px solid #ccc;
}

.row-aside {
  margin-left: 30px;
}

.el-main {
  padding: 0 12px 0 0;
}

.txt {
  display: inline-block;
  margin-right: 12px;
  line-height: 25px;
}

.row1 {
  font-size: 14px;
  color: #000;
  margin-bottom: 12px;
}

.txt2 {
  font-size: 13px;
  color: #333;
}
</style>
